// 插件：ES7+ React/Redux/React-Native
// 快捷方式：rcc react-class-component  rfc  react-function-component
import React, { Component } from 'react'
// 相当于vue中的 app.vue
// import logo from './logo.svg'; // 引入图片的方式
import './App.css'; // 引入css的方式
// 引入组件
// import Com1 from "./components/Com1";
// import Com2 from "./components/Com2";
// 路由组件-自己写好的
import Router from './route/Router'
import { NavLink,withRouter } from 'react-router-dom';

class App1 extends Component {
  changePage(url) {
    this.props.history.push(url)
  }
  render() {
    return (
      <>
        <Router></Router>
        <button onClick={()=>this.changePage('/hello')}>btn-hello</button>
        <button onClick={()=>this.changePage('/com1')}>btn-com1</button>
        <button onClick={()=>this.changePage('/com2')}>btn-com2</button>
      </>
    )
  }
}
// 经过withRouter处理后的非路由组件，就具有了路由的属性和方法
// withRouter 是高阶组件HOC-高阶组件是参数为组件，返回值为新组件的函数
const App = withRouter(App1);
export default App
